<template>
    <el-watermark content="橙子音乐" :height="30"  :width="80" z-index="1000" gap=[60,500] :fontSize="8" class="wrapper">

        <div style="height: auto" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
            <div>
                <div class="div-a">
                    <img src="assets/logo_32.png" />
                </div>
                <div class="div-b">
                    <marquee show="showMsg != ''"  direction="right">{{showMsg}}</marquee>
                </div>
                
                
            </div>
            
            <audio autoplay loop controls="controls" :src="musicSRC"  id="play">
            </audio>
            <div v-show="showList" id="building">
                <p id="musicTitle">音乐列表</p>
                <el-scrollbar height="300px" >
                    <p v-for="(item,index) in options" :key="item" class="scrollbar-demo-item" @click="selectOnChange(item,index)" >
                        
                        <el-text class="mx-1">{{ item.name }}</el-text>
                    </p>
                </el-scrollbar>
            </div>
        </div>
    </el-watermark>
</template>


<script>
import axios from 'axios'
export default {
    data() {
        return {
            test: "123",
            showMsg:"橙子音乐",
            showList: false,
            musicItem:null,
            musicIndex:0,
            musicSRC:"http://localhost:1987/music/%E4%B8%80%E7%9B%B4%E5%BE%88%E5%AE%89%E9%9D%99.mp3",
            options:  [
            ]

        }
    },
    mounted:function () {
        this.getMusic();
        document.addEventListener("visibilitychange", e=>{
            if(document.visibilityState === "hidden"){

                this.handleFn()
            }
            console.log(e)
        })
    },
    methods: {
        handleMouseEnter() {
            console.log('鼠标移入');
            this.showList = true;
        },
        handleMouseLeave() {
            console.log('鼠标移出');
            this.showList = false;
        },
        handleFn(){
     
            //const URL = process.env.VUE_APP_BASE_API+"/uploads/deleteAll"
            //navigator.sendBeacon(URL)
            console.log("隐藏了")
        },
        listenVisible(evt, hidden) {
            console.log('隐藏: ' + hidden)
        },
        MusicPlay(){
            let that = this;

            const audio = document.getElementById("play");
            audio.addEventListener("ended", that.playNextSong());
            audio.play();
            console.log("MusicPlay")
        },
        getMusic(){
            let that = this;
            const xhr = new XMLHttpRequest();
            xhr.timeout = 3000;
            xhr.open('GET', 'http://172.19.52.67:1987/getMyMusic', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const responseData = JSON.parse(xhr.responseText);
                    let {code,msg,songs} = responseData;
                    that.options = songs;
                    if (code != 200){
                        console.log(msg);
                        //that.MusicPlay();
                    }
                    
                }
            }
            xhr.ontimeout = function(event){
                alert('请求超时！'+event);
            }
            xhr.send();
        },
        playNextSong() {
            // 获取当前歌曲的序号
            let that = this;
            console.log("playNextSong")
            console.log("准备播放下一首歌曲");
            var audio = document.getElementById("play");
            // 根据当前歌曲的序号计算下一首歌曲的序号
            var nextSongIndex = (that.musicIndex + 1) % that.options.length;
            console.log(that.musicIndex + 1,that.options.length);
            console.log(that.options,that.options.length);
            // 根据下一首歌曲的序号获取下一首歌曲的路径
            console.log(nextSongIndex,that.options[nextSongIndex]);
            var nextSongPath = that.options[nextSongIndex].path;
            that.showMsg = "正在播放"+that.options[nextSongIndex].name;
            // 准备播放下一首歌曲
            audio.src = 'http://172.19.52.67:1987/music'+nextSongPath;
            audio.play();
        },
        musicList(){
            let params = {};
            let that = this;
            axios({
                method: 'get',
                url: "http://127.0.0.1:1987/getMyMusic",
                data: params,
                headers: {
                    'Authorization': null,
                    'Access-Control-Allow-Origin':"*",
                    'channel': "web"
                }
            }).then(response => {
                let {code,msg,songs} = response;
                
                that.options = songs;
                if (code != 200){
                    console.log(msg);
                }
                console.log(that.options);
            }).catch(function(error) {
                console.log(error);
            });
        },
        selectOnChange(item,index){
            this.showMsg = "正在播放"+item.name;
            this.musicIndex = index;
            this.musicSRC = "http://localhost:1987/music"+item.path;
        }
    }
}
</script>

<style>
.wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
 
#building {
    opacity: 1;
    color:black;
    background-color: rgba(255, 255, 255, 0.1);
}
#musicTitle{
    font-color:black;
}
.div-a{ float:left;width:15%;border:1px } 
.div-b{ float:left;width:75%;border:1px } 
</style>
